import React,{Component} from "react"
import "../css/bottom.css"
import {Link} from 'react-router'
const pic1=require("../images/index_1.png")
const pic2=require("../images/index_2.png")
const pic3=require("../images/index_3.png")
export  default   class  Bottm  extends Component{
    constructor(props) {
        super(props)
        this.state = {
            list: [
                {id: 0, url: pic1,name:"新闻",link:'/news'},
                {id: 1, url: pic2,name:"商品列表",link:'/list'},
                {id: 2, url: pic3,name:"购物车",link:'/car'}
            ]
        }
    }
        render(){
            return(
                <ul className="bottom_ul">
                    {
                     this.state.list.map(function(v){
                         return(
                         <li key={v.id} >
                         <Link to={v.link}>
                             <i   style={{display:"inline-block",width:"30px",height:"30px",background:"url("+v.url+") no-repeat",backgroundSize:"100% 100%"}}></i>
                             <span>{v.name}</span>
                         </Link>
                         </li>
                         )
                     })
                    }
                </ul>
            )
        }

}